<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>colorpicker demo</title>
<script src="../highlight/shCore.js"></script>
<script src="../avalon.js"></script>
<link rel="stylesheet" href="../style/avalon.doc.css"/>
</head>
<body ms-controller="demo">
	<h1>colorpicker 示例</h1>
	<fieldset>  
		<legend>默认设置</legend>
		<input type="text" ms-widget="colorpicker">
	</fieldset>
	<fieldset>  
		<legend>设置初始颜色</legend>
		<input type="text" ms-duplex="color_1" ms-widget="colorpicker">
	</fieldset>
	<fieldset>  
		<legend>关闭自动隐藏</legend>
		<input type="text" ms-widget="colorpicker, $, $cp_2">
	</fieldset>
	<fieldset>  
		<legend>更改默认颜色</legend>
		<input type="text" ms-widget="colorpicker, $, $cp_3">
	</fieldset>
	<fieldset>  
		<legend>更改背景颜色</legend>
		<input type="text" ms-widget="colorpicker, $, $cp_4">
	</fieldset>
    
	<pre class="brush:html;gutter:false;">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;title&gt;colorpicker demo&lt;/title&gt;
&lt;script src="../avalon.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="../style/avalon.doc.css"/&gt;
&lt;/head&gt;
&lt;body ms-controller="demo"&gt;

	&lt;fieldset&gt;  
		&lt;legend&gt;默认设置&lt;/legend&gt;
		&lt;input type="text" ms-widget="colorpicker"&gt;
	&lt;/fieldset&gt;
	&lt;fieldset&gt;  
		&lt;legend&gt;设置初始颜色&lt;/legend&gt;
		&lt;input type="text" ms-duplex="color_1" ms-widget="colorpicker"&gt;
	&lt;/fieldset&gt;
	&lt;fieldset&gt;  
		&lt;legend&gt;关闭自动隐藏&lt;/legend&gt;
		&lt;input type="text" ms-widget="colorpicker, $, $cp_2"&gt;
	&lt;/fieldset&gt;
	&lt;fieldset&gt;  
		&lt;legend&gt;更改默认颜色&lt;/legend&gt;
		&lt;input type="text" ms-widget="colorpicker, $, $cp_3"&gt;
	&lt;/fieldset&gt;
	&lt;fieldset&gt;  
		&lt;legend&gt;更改背景颜色&lt;/legend&gt;
		&lt;input type="text" ms-widget="colorpicker, $, $cp_4"&gt;
	&lt;/fieldset&gt;

	&lt;script&gt;
		require(["colorpicker/avalon.colorpicker"], function(){
			var model = avalon.define("demo", function(vm){
				
				vm.color_1 = "#ff0000";

				vm.$cp_2 = {
					autoHide: false
				};

				vm.$cp_3 = {
					defaultColor: "#0000ff"
				};
				
				vm.$cp_4 = {
					bgColor: "#555"
				};

			});
			avalon.scan();
		});
	&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
	</pre>
	<script>
		require(["colorpicker/avalon.colorpicker"], function(){
			var model = avalon.define("demo", function(vm){
				
				vm.color_1 = "#ff0000";

				vm.$cp_2 = {
					autoHide: false
				};

				vm.$cp_3 = {
					defaultColor: "#0000ff"
				};

				vm.$cp_4 = {
					bgColor: "#555"
				};

			});
			avalon.scan();
		});
	</script>
</body>
</html>